<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active{
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <!-- 宿主文件 -->
    <div id="app">
        <!-- v-bind:title="title" 或者 :title="title" -->
        <h2 :title="title">
            <!-- 插值文本 -->
            {{title}}
        </h2>

        <!-- 用户输入 -->
        <p>
            <input type="text" v-model="course" v-on:keydown.enter="addCourse">
            <button @click="addCourse">新增</button>
            {{course}}
        </p>

        <!-- 列表组件 -->
        <course-list :courses="courses"></course-list>
        
        <!-- 商品总数 -->
        <p>
            <!-- 1.表达式 -->
            <!-- 课程总数：{{courses.length + '门'}} -->
            <!-- 2.计算属性 -->
            <!-- 课程总数：{{total}} -->
            <!-- 3.监听器 -->
            课程总数：{{totalCount}}
        </p>
    </div>
    <!-- 可以这样使用最新版本vue.js -->
    <script src="vue.min.js"></script>

    <script>
        // 课程列表组件
        Vue.component('course-list', {
            data() {
                return {
                    selectedCourse: '', 
                }
            },
            props: {
                courses:{
                    type: Array,
                    default: []
                }
            },
            template: `
                <div>
                    <!-- 条件渲染 -->
                    <p v-if="courses.length == 0">没有任何课程信息</p>

                    <!-- 列表渲染 -->
                    <!-- 第一种方法 -->
                    <!-- <div v-for="c in courses" :key="c" :class="{active: selectedCourse === c}" @click="selectedCourse = c">
                        {{ c }}
                    </div> -->

                    <!-- 第二种方法 -->
                    <!-- style -->
                    <div class="course-list" v-else>
                        <div v-for="c in courses" :key="c" :style="{backgroundColor: (selectedCourse ===c ? '#ddd' : 'transparent')}" @click="selectedCourse = c">
                            {{ c }}
                        </div>
                    </div>
                </div>
            `
        })

        // 模拟异步数据调用
        function getCourses() {
            return new Promise(resolve =>{
                setTimeout(() => {
                    resolve(['web全栈','web高级'])
                }, 2000);
            })
        }
    //1.创建vue实例
    const app = new Vue({
        el: '#app',
        data() {
            return {
                title: '开课吧购物车',
                course: '',
                
                courses: [],
                totalCount: 0
            }
        },
        async created(){
            //组件实例已创建，由于未挂载，dom不存在
            const courses = await getCourses()
            this.courses = courses
        },
        // mounted(){},
        methods: {
            addCourse() {
                // 1.添加course到数组
                this.courses.push(this.course)
                // 2.清空course
                this.course = ''
            }
        },
        computed: {
            total() {
                // 计算属性有缓存性：如果值没有发生变化，则页面不会重新渲染
                return this.courses.length + '门' 
            }
        },
        // 默认情况下watch初始化时不执行
        // watch: {
        //     courses(newValue, oldValue) {
        //         this.totalCount = newValue.length + '门'
        //     }
        // },
        watch: {
            courses: {
                immediate: true,//立即执行一次
                // deep: true,
                handler(newValue, oldValue) {
                    this.totalCount = newValue.length + '门'
                }
            }
        },
    })

    </script>
</body>
</html>